<template>
  <div class="app-container" v-loading="loading">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="商品">
        <el-input v-model="queryParams.skuName" placeholder="商品名称" clearable />
      </el-form-item>
      <!-- <el-form-item label="项目ID" prop="id" >
        <el-select clearable="" v-model="queryParams.id" filterable placeholder="请选择项目">
          <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryByForm">检索</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd"
        style="margin-right: 20px">新增sku</el-button>
      <ExportExcel :list="exportList" :tHeader="tHeader" :tValue="tValue" filename="导出的sku列表">excel导出</ExportExcel>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-row>

    </el-row>
    <el-table ref="skuTable" :data="list" style="width: 100%" empty-text="--" @selection-change="handleSelectionChange"
      row-key="skuId">
      <el-table-column type="selection" width="55" :reserve-selection="true">
      </el-table-column>
      <el-table-column label="序号" prop="id" align="center">
        <!-- <template slot-scope="scope">
          <span>{{ (pageNum) * pageSize + scope.$index + 1 }}</span>
        </template> -->
      </el-table-column>
      <el-table-column label="SKU编号" align="center" prop="skuId" :show-overflow-tooltip="true" />
      <el-table-column label="SKU名称" align="center" prop="skuName" :show-overflow-tooltip="true" />
      <el-table-column label="SKU图片" align="center" prop="imageUrl">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="bottom" width="400">
            <img slot="reference" :src="scope.row.imageUrl" height="50" v-if="scope.row.imageUrl" />
            <img :src="scope.row.imageUrl" style="width: 300px" v-if="scope.row.imageUrl" />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="绑定V4算法名称" align="center" prop="v4SkuName" :formatter="commonFormat"
        :show-overflow-tooltip="true" />
      <el-table-column label="V4顶层算法Id" align="center" prop="v4TopSkuId" :formatter="commonFormat"
        :show-overflow-tooltip="true" />
      <el-table-column label="V4顶层主图" align="center" prop="v4TopSkuPackageUrl">
        <template slot-scope="scope">
          <div>
            <el-popover trigger="hover" placement="bottom" width="400" v-if="scope.row.v4TopSkuPackageUrl">
              <img slot="reference" :src="scope.row.v4TopSkuPackageUrl" height="50" v-if="scope.row.v4TopSkuPackageUrl" />
              <img :src="scope.row.v4TopSkuPackageUrl" style="width: 300px" v-if="scope.row.v4TopSkuPackageUrl" />
            </el-popover>
            <span v-if="!scope.row.v4TopSkuPackageUrl">-</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="V4中间层算法Id" align="center" prop="v4MidSkuId" :formatter="commonFormat"
        :show-overflow-tooltip="true" />
      <el-table-column label="V4中间层主图" align="center" prop="v4MidSkuPackageUrl">
        <template slot-scope="scope">
          <div>
            <el-popover trigger="hover" placement="bottom" width="400" v-if="scope.row.v4MidSkuPackageUrl">
              <img slot="reference" :src="scope.row.v4MidSkuPackageUrl" height="50" v-if="scope.row.v4MidSkuPackageUrl" />
              <img :src="scope.row.v4MidSkuPackageUrl" style="width: 300px" v-if="scope.row.v4MidSkuPackageUrl" />

            </el-popover>
            <span v-if="!scope.row.v4MidSkuPackageUrl">-</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="V4底层算法Id" align="center" prop="v4BottomSkuId" :formatter="commonFormat"
        :show-overflow-tooltip="true" />
      <el-table-column label="V4底层主图" align="center" prop="v4BottomSkuPackageUrl">
        <template slot-scope="scope">
          <div>
            <el-popover trigger="hover" placement="bottom" width="400" v-if="scope.row.v4BottomSkuPackageUrl">
              <img slot="reference" :src="scope.row.v4BottomSkuPackageUrl" height="50"
                v-if="scope.row.v4BottomSkuPackageUrl" />
              <img :src="scope.row.v4BottomSkuPackageUrl" style="width: 300px" v-if="scope.row.v4BottomSkuPackageUrl" />

            </el-popover>
            <span v-if="!scope.row.v4BottomSkuPackageUrl">-</span>
          </div>
        </template>
      </el-table-column>

      <!-- <el-table-column label="SKU品类" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope" v-if="scope.row.classify != null">
          {{ scope.row.classify === 0 ? '本品' : (scope.row.classify === 1 ? '竞品' : '他品') }}
        </template>
      </el-table-column>

      <el-table-column label="是否为必铺品" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ scope.row.bipupin === true ? '是' : '否' }}
        </template>
      </el-table-column> -->

      <el-table-column label="创建时间" align="center" prop="imageUrl" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ formateTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleEdit(scope.row)">修改</el-button>
          <el-button size="mini" type="text" @click="handleDel(scope.row)">删除</el-button>
          <el-button size="mini" type="text" @click="handleCancelBind(scope.row)"
            v-show="scope.row.v4SkuName !== '' && scope.row.v4SkuName !== null">解绑</el-button>
          <el-button size="mini" type="text" @click="handleBind(scope.row)">
            {{ `${scope.row.v4TopSkuId ? '换绑' : '绑定'}sku算法` }}
          </el-button>
          <!-- <el-button size="mini" type="text" @click="handleBindMid(scope.row)"
              >
              {{`${scope.row.v4MidSkuId ? '换绑' : '绑定'}中间层算法`}}
              </el-button
            >
            <el-button size="mini" type="text" @click="handleBindBot(scope.row)"
              >
              {{`${scope.row.v4BottomSkuId ? '换绑' : '绑定'}底层算法`}}
              </el-button
            > -->
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="pagination" />

    <!-- 以下为弹框相关 新增或者修改-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogOpen" @close="cancel" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="SKU编号" prop="skuId">
              <el-input v-model="form.skuId" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="SKU名称" prop="skuName">
              <el-input v-model="form.skuName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="项目ID" prop="userId">
              <el-select v-model="form.projectId" filterable placeholder="请选择" >
                <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id">
                </el-option>l
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="SKU品类" prop="classify">
              <el-radio-group v-model="form.classify">
                <el-radio :label="0">本品</el-radio>
                <el-radio :label="1">竞品</el-radio>
                <el-radio :label="2">他品</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="form.classify === 0">
            <el-form-item label="是否为必铺品" prop="bipupin">
              <el-radio-group v-model="form.bipupin">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="SKU图片" prop="file">
              <el-upload multiple class="avatar-uploader" :action="uploadFileUrl + '?fileTypeCode=' + this.fileTypeCode"
                :show-file-list="false" :data="uploadData" :headers="headers" :on-success="handleUploadSuccess">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 删除前提示 -->
    <el-dialog title="提示" :visible.sync="deleteVisible" width="30%">
      <span>是否删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteSKU">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 解绑提示框 -->
    <el-dialog title="解绑算法" :visible.sync="UnbindVisible" width="30%">
      <span>是否解绑？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="UnbindVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteSKU">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 绑定算法-检索部分 -->
    <el-dialog title="绑定算法sku" :visible.sync="bindVisible" width="60%">
      <el-form ref="searchingForm" :model="searchingForm">
        <el-form-item label="算法skuId:" style="width:7%;float:left;text-align:center;margin-left:3%"></el-form-item>
        <el-select v-model="searchingForm.skuId" filterable placeholder="请输入或选择" style="float:left">
          <el-option v-for="item in searData" :key="item.id" :label="item.id" :value="item.id">
          </el-option>
        </el-select>
        <el-form-item label="算法sku名称:" style="width:8%;float:left;text-align:center;margin-left:3%"></el-form-item>
        <el-select v-model="searchingForm.skuName" filterable placeholder="请输入或选择" style="float:left">
          <el-option v-for="item in skuNameList" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" size="mini" style="margin-left:20px"
          @click="queryBySearchingForm">检索</el-button>
        <el-button type="primary" icon="el-icon-search" size="mini" style="margin-left:20px"
          @click="clearSearchingForm">清空</el-button>
      </el-form>
      <!-- 绑定算法-结果部分 -->
      <el-table v-loading="bindLoading" :data="alogData" style="width: 100%" max-height="500">
        <el-table-column width="55" label="选择">
          <template slot-scope="scope">
            <el-radio class="radio" v-model="chooseValue" :label="scope.row.id">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column label="算法skuId" width="200" align="center" header-align="center" prop="id" />
        <el-table-column label="算法sku名称" width="400" align="left" header-align="center" prop="name" />
        <el-table-column label="图片" align="center" prop="packageUrl">
          <template slot-scope="scope">
            <div>
              <el-popover trigger="hover" placement="center" width="80">
                <img slot="reference" :src="scope.row.packageUrl" style="width: 20px;height: 20px;"
                  v-if="scope.row.packageUrl" />
                <img :src="scope.row.packageUrl" style="width: 80px" v-if="scope.row.packageUrl" />
              </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="alogPagn.total > 0" :total="alogPagn.total" layout="prev, pager, next" small
        @pagination="aloGpagination" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelBind">取 消</el-button>
        <el-button type="primary" @click="confirmBind">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
<script>
import {
  addSKUV2,
  modifySKUV2,
  modifySKUV2NoFile,
  delSKU,
  getProjectList,
  exportSKUExcel
} from '@/api/sku/sku'
import { userListSon, getDadInfoByUserId, userListPageAll } from '@/api/user'
import algoSku from '@/views/genius/platform-goods/components/algo-sku.vue'  
import { listCustomer } from '@/api/customer/customer'
import { intRole } from '@/utils/formValidate'
import { getToken } from '@/utils/auth'
import ExportExcel from '../../../components/ExcelUtils/Export2Excel.vue'
import {
  algBindV4,
  getAlgListV4,
  algUnBindV4,
  getGoodsList,
  startSyncSKU,
  getSkuSyncResult,
  startBingdingSync
}
  from '@/api/arithmetic/arithmetic'
import moment from 'moment'
export default {
  name: 'Online',
  components: {
    algoSku,
    ExportExcel
  },
  data() {
    return {
      //code:1 文本  2-软件包 3-图片 4-视频 9999-其他
      fileTypeCode: 3,
      exportList: [],
      tHeader: ['项目', 'SKU编号', 'SKU名称', '绑定V4算法名称', 'SKU品类', '必铺品', 'SKU图片'],
      tValue: ['projectName','skuId', 'skuName', 'v4SkuName', 'classify', 'bipupin', 'imageUrl'],
      tValue: ['projectName','skuId', 'skuName', 'v4SkuName', 'classify', 'bipupin', 'imageUrl'],
      syncDialogTitle: '',
      syncResultDialogTitle: '',  
      getSyncResultForm: {
        requestId: ''
      },
      tValue: ['projectName','skuId', 'skuName', 'v4SkuName', 'classify', 'bipupin', 'imageUrl'],  
      syncDialogTitle: '',
      syncResultDialogTitle: '',  
      getSyncResultForm: {
        requestId: ''
      },
      imageUrl: '',
      showSearch:true,
      skuNameList: [],
      projectList: {}, //获取到的项目列表
      projectName: [],//项目名称
      // 平台sku同步弹框
      skuImgUrl: '',//图片url
      classify: '',
      bipupin: '',
      // initCustomer: [],
      showText: '选择绑定sku:-',
      bindLoading: false,
      alogPagn: {
        total: 0,
        pageNum: 1,
        pageSize: 20,
      }, // 分页数据
      chooseValue: '', // 绑定单选框
      alogData: [], // 算法表格数据
      searData: [], //算法表格-搜索框数据
      bindVisible: false, // 绑定算法sku
      deleteVisible: false, // 删除提示
      UnbindVisible:false, //解绑提示
      // 图片上传信息
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      uploadData: {
        userId: this.$store.state.user.id,
      },
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/oss-controller/upload-file", // 上传文件服务器地址
      //uploadFileUrl: process.env.VUE_APP_BASE_API + '/sku/upload/', // 上传文件服务器地址
      // 遮罩层
      loading: false,
      pushloading: false,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      pageNum: 1,
      pageSize: 10,
      // 查询参数
      queryParams: {
        skuName: '',
        projectId:'',
        orderByColumn:'id',
        isAsc:'desc'
      },
      dialogOpen: false,
      dialogTitle: '新增SKU',
      rules: {
        skuId: [{ required: true, message: '不能为空', trigger: 'blur' }],
        skuName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        skuImgUrl: [{ required: true, message: '请添加图片' }],
      },
      form: {
        skuId: '', //	string allowEmptyValue: false 商品唯一标识，不可修改
        skuName: '', //	string allowEmptyValue: false 商品名称
        projectId:'',
        file: '',
        classify: 0, //产品品类 0本品 1竞品 2他品
        bipupin: true,//默认不是必铺品 true是 false不是
        id: '',//选中行的id
      },
      searchingForm: {
        layer: '',
        skuId: '',
        skuName: ''
      },
      editRow: null, //修改行
    }
  },
  created() {
    this.getProject()
    this.getList()
  },
  mounted() {
  },
  watch: {
    chooseValue() {
      const text = this.infoText()
      this.showText = text
    },
  },
  methods: {
    //导出excel
    ExportExcel() {
      const params = this.list
      exportSKUExcel(params).then((res) => {
        if (res.data == 200) {
          this.$message.success("导出成功！")
        }
      }).catch((err) => {
        this.$message.success("结果查询失败，原因：", err.message)
      })
    },
    getProject() {
      let params = {
        orderByColumn:'id',
        isAsc:'desc'
      }
      getProjectList(params).then((res) => {
        if (res.code === 200) {
          this.projectList = res.rows
          for (var i = 0; i < res.rows.length; i++) {
            this.projectName.push(res.rows[i].projectName)
          }
        }
      })
    },
    /** 表格全选事件 */
    handleSelectionChange(selection) {
      this.exportList = selection
    },
    //图片上传成功
    handleUploadSuccess(res, file) {
      if (res.code === 200) {
        this.imageUrl = res.data.url
      } else {
        this.$message.error("图片上传失败")
        console.log('图片上传失败');
      }
    },
    // 上传文件改变 fileList
    // handFileChange(e) {
    //   let fileData = e.target.files[0] //这是我们上传的文件
    //   // this.algoForm.algMainImg = fileData
    //   let url = URL.createObjectURL(fileData)
    //   this.skuImgUrl = url
    //   //const imageUrl=this.skuImgUrl.slice(5)+".jpg"
    //   this.form.file = fileData
    //   // console.log("form",this.from)
    // },
    clearSearchingForm() {
      this.searchingForm.skuId = '',
        this.searchingForm.skuName = '',
        this.queryBySearchingForm()
    },
    /**检索算法 */
    queryBySearchingForm() {
      const params = {
        skuId: this.searchingForm.skuId,
        skuName: this.searchingForm.skuName,
        pageIndex: 0,
        pageSize: this.alogPagn.pageSize,
        orderByColumn:'id',
        isAsc:'desc'
        // layer:0
      }
      this.bindLoading = true
      getAlgListV4(params).then((res) => {
        const { data, pageIndex, totalCount } = res.data || {}
        this.alogData = data
        this.alogPagn = {
          total: totalCount
        }
      })
        .finally(() => {
          this.bindLoading = false
        })
    },
    commonFormat(row, column, cellValue, index) {
      // console.log('## row, column cellValue index', row, column, cellValue, index)
      return !cellValue && cellValue !== 0 ? '-' : cellValue
    },
    /** 绑定算法表单提交 */
    confirmBind() {
      if (this.chooseValue) {
        //清除检索框的数值
        this.searchingForm.id = ''
        this.searchingForm.name = ''
        // todos modal关闭的时候清空 chooseValue
        const chooseItem = this.getBindDataById(this.chooseValue)
        const params =
        {
          // algSkuId:chooseItem.skuId,
          // algSkuName:chooseItem.skuName,
          // userSkuId: this.bindRow.id,
          arithId: chooseItem.id,
          arithName: chooseItem.name,
          id: this.bindRow.id
        }
        this.bindLoading = true
        algBindV4(params)
          .then((res) => {
            this.$message.success("算法绑定成功！")
            this.bindVisible = false
            this.pagination()
          })
          .catch((err) => {
            if (err.code === 1) {
              if (err.message == 'SKU未注册完整') {
                this.$message("三层算法未注册完整，请检查")
              } else {
                this.$message(err.message)
              }

            }
          })
          .finally(() => {
            this.bindLoading = false
          })
      } else {
        this.$message.error('请选择绑定sku')
      }
    },
    infoText() {
      const ret = this.getBindDataById(this.chooseValue) || {}
      return `选择绑定sku: ${ret.skuName || '-'}`
    },
    // 通过Id查询整条数据
    getBindDataById(id) {
      return this.alogData.find((item) => item.id === id)
    },
    pagination() {
      this.loading = true
      this.getList().finally(() => (this.loading = false))
    },
    /** 点击新增sku */
    handleAdd() {
      this.dialogTitle = '新增SKU'
      this.dialogOpen = true
      this.imageUrl = ''
    },
    formateTime(time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    },
    /**提交新增或修改表单 */
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (!valid) return
        // todos 添加loading
        if (this.form.classify !== 0) {
          this.form.bipupin = false
        }
        //const imageUrl = this.skuImgUrl.slice(5) + ".png"
        const form =
        {
          skuId: this.form.skuId, //	string allowEmptyValue: false 商品唯一标识，不可修改
          skuName: this.form.skuName, //	string allowEmptyValue: false 商品名称
          projectId: this.form.projectId,  //
          imageUrl: this.imageUrl,//还没做完
          classify: this.form.classify, //产品品类 0本品 1竞品 2他品
          bipupin: this.form.bipupin,//默认不是必铺品 1是 0不是
          id: this.form.id,//选中行的id
          // v4BottomSkuId: 0,
          // v4BottomSkuPackageUrl: "",
          // v4MidSkuId: 0,
          // v4MidSkuPackageUrl: "",
          // v4SkuName: "",
          // v4TopSkuId: 0,
          // v4TopSkuPackageUrl: ""
        }
        // this.form.imageUrl=''
        let str = ''
        Object.keys(form).forEach((key) => {
          if (key !== 'file') {
            str += `&${key}=${form[key]}`
          }
        })
        const formData = new FormData()
        this.loading = true
        //修改
        if (this.editRow) {
          const params = form
          modifySKUV2(params)
            .then((res) => {
              this.getList()
              this.$message.success('修改SKU成功')
              this.cancel()
            })
            .catch((err) => {
              this.$message.error(err.message || '修改SKU失败')
            })
            .finally(() => {
              this.loading = false
            })
        } else {
          const params = form
          addSKUV2(params)
            .then((res) => {
              this.getList()
              this.$message.success('添加SKU成功')
              this.cancel()
            })
            .catch((err) => {
              this.$message.error(err.message || '添加SKU失败')
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
    /**关闭弹窗 新增或修改*/
    cancel() {
      this.editRow = null
      this.dialogOpen = false
      // this.form={}
      this.form.skuId = ''
      this.form.skuName = ''
      this.form.imageUrl = ''
      this.form.userId = 0
      this.form.classify = 0
      this.form.bipupin = false
      this.form.file = ''
      this.form.id = ''
      this.skuImgUrl = ''
    },
    /** 查询 */
    getList(obj) {
      // 传参
      const params = {
        pageNum: this.pageNum ,
        pageSize: this.pageSize,
        // projectId: this.queryParams.id,
        skuName: this.queryParams.skuName,
        orderByColumn:'id',
        isAsc:'desc'
        // skuId: this.queryParams.skuId
      }
      // 加载
      this.loading = true
      // 接口调用
      const req = getGoodsList(params)
        .then((res) => {
          if (res) {
            this.noProjectName = res.rows
            this.total = res.total
            this.addProjectName().then((list)=>{
              this.list = list
            })
          }
        })
        .finally(() => {
          this.loading = false
        })
      return req
    },
    /**添加projectname字段*/
    async addProjectName(){
      let project = Array.from(this.projectList)
            let list = Array.from(this.noProjectName)
      await list.map((item2) => {
              project.map((item1) => {
                if (item2.projectId == item1.id) {
                  item2.projectName = item1.projectName
                }
              })
            })
       return list
    },
    /**条件查询*/
    queryByForm() {
      const params = {
        ...this.queryParams,
        pageIndex: 0,
      }
      this.getList(params)
    },
    /**
     * 点击修改SKU时
     * @param {Object} row
     */
    handleEdit(row) {
      this.editRow = row
      this.imageUrl = row.imageUrl
      this.form.skuId = row.skuId
      this.form.skuName = row.skuName
      this.form.classify = row.classify
      this.form.bipupin = row.bipupin
      //this.form.userId = row.user?.id
      this.skuImgUrl = row.imageUrl
      this.form.id = row.id
      this.dialogOpen = true
      this.dialogTitle = '修改SKU'
    },
    /**绑定算法sku  先解绑在绑定 */ 
    handleBind(row) {
      this.bindRow = row
      if (this.bindRow.v4SkuName !== null && this.bindRow.v4SkuName !== "") {
        //解绑
        const params = {
          arithId: row.v4MidSkuId,
          arithName: row.v4SkuName,
          id: row.id
        }
        algUnBindV4(params).then((res) => {
        }).catch((err) => {
          if (err.code === 1) {
            this.$message.error(err.message)
          }
        })
      }
      this.searchingForm.skuId = ''
      this.searchingForm.skuName = ''
      this.bindVisible = true
      this.getAlgoData()
      this.getSearAlgoData()
    },
    aloGpagination(value) {
      this.getAlgoData({ pageIndex: value.page - 1, pageSize: value.limit })
    },
    /**绑定算法搜索框-初始化 */
    getSearAlgoData() {
      const params = {
        pageIndex: 0,
        pageSize: 10000,
        //layer:0
      }
      this.bindLoading = true
      getAlgListV4(params)
        .then((res) => {
          const { data, pageIndex, totalCount } = res.data || {}
          this.searData = data
          for (var i = 0; i < this.searData.length; i++) {
            if (this.skuNameList.indexOf(this.searData[i].name) === -1) {
              this.skuNameList.push(this.searData[i].name)
            }
          }
          this.alogPagn = {
            pageNum: pageIndex + 1,
            total: totalCount,
          }
        })
        .finally(() => {
          this.bindLoading = false
        })
    },
    getAlgoData(obj = {}) {
      const params = {
        pageIndex: 0,
        pageSize: obj.pageSize,
        //layer:0,
        ...obj,
      }
      this.bindLoading = true
      getAlgListV4(params).then((res) => {
        const { data, pageIndex, totalCount } = res.data || {}
        this.alogData = data
        this.alogPagn = {
          pageNum: pageIndex + 1,
          total: totalCount,
        }
      })
        .finally(() => {
          this.bindLoading = false
        })
    },
    /**解除绑定 */
    handleCancelBind(row) {
      if (row.v4SkuName === null && row.v4SkuName === "") {
        this.$message.error("该SKU并未绑定V4算法")
        return
      }
      const params = {
        arithId: row.v4MidSkuId,
        arithName: row.v4SkuName,
        id: row.id
      }
      algUnBindV4(params).then((res) => {
        this.$message.success("解绑成功！")
        this.getList()
        this.pagination()
      }).catch((err) => {
        if (err.code === 1) {
          this.$message.error(err.message)
        }
      })
    },
    /**取消绑定表单 */
    cancelBind() {
      this.bindVisible = false
      this.getList()
    },
    /**删除按钮 */
    handleDel(row) {
      this.delRow = row
      this.deleteVisible = true
      this.deleteTitle = '删除SKU'
    },
    /** 确定删除 */
    deleteSKU() {
      let row = this.delRow
      //删除前判断是否有绑定
      if (row.v4SkuName) {
        const params = {
          arithId: row.v4MidSkuId,
          arithName: row.v4SkuName,
          id: row.id
        }
        algUnBindV4(params).then((res) => {
          if (res.code === 200) {
            this.loading = true
            delSKU({ ids: String(row.id) })
              .then((res) => {
                this.getList()
                this.$message.success('SKU删除成功')
              })
              .catch((err) => {
                this.$message.error(err.message || 'SKU解绑失败')
              })
              .finally(() => {
                this.loading = false
                this.UnbindVisible = false
                this.deleteVisible = false
              })
          }
        }).catch((err) => {
          if (err.code === 1) {
            this.$message.error(err.message)
          }
        })
      } else {
        this.loading = true
        delSKU({ ids: String(row.id) })
          .then((res) => {
            this.getList()
            this.$message.success('SKU删除成功')
          })
          .catch((err) => {
            this.$message.error(err.message || 'SKU删除失败')
          })
          .finally(() => {
            this.loading = false
            this.deleteVisible = false
          })
      }


    },
  },
}
</script>
<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.radio {
  .el-radio__label {
    display: none;
  }
}
</style>
  